<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      layout:decorate="main" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro"
      xmlns:layout="http://www.ultraq.net.nz/web/thymeleaf/layout">
<head>
    <title>角色管理</title>
    <!-- css -->
    <link th:href="@{/css/bootstrap.min.css}" href="../static/css/bootstrap.min.css" rel="stylesheet"/>
    <link th:href="@{/css/font-awesome.min.css}" href="../static/css/font-awesome.min.css" rel="stylesheet">
    <link th:href="@{/css/nprogress.css}" href="../static/css/nprogress.css" rel="stylesheet">
    <link th:href="@{/css/green.css}" href="../static/css/green.css" rel="stylesheet">
    <link th:href="@{/css/bootstrap-progressbar-3.3.4.min.css}" href="../static/css/bootstrap-progressbar-3.3.4.min.css"
          rel="stylesheet">
    <link th:href="@{/css/jqvmap.min.css}" href="../static/css/jqvmap.min.css" rel="stylesheet"/>
    <link th:href="@{/css/dropzone.min.css}" href="../static/css/dropzone.min.css" rel="stylesheet">
    <link th:href="@{/css/custom.min.css}" href="../static/css/custom.min.css" rel="stylesheet">
    <!-- Custom Style -->
    <link th:href="@{/localcss/crmlist.css}" href="../static/localcss/crmlist.css" rel="stylesheet">
</head>

<body class="nav-md footer_fixed">
<div class="container body">
    <div class="main_container">
        <div th:include="common/lefter :: lefter" class="col-md-3 left_col menu_fixed"></div>
        <div th:include="common/header :: header" class="top_nav"></div>
            <div class="right_col">
                <div class="clearfix"></div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="x_panel">
                            <div class="x_title">
                                <h2>
                                    角色管理 <i class="fa fa-user"></i>
                                    <small>
                                        - 您可以通过搜索或者其他的筛选项对角色的信息进行编辑、删除等管理操作。^_^
                                    </small>
                                </h2>
                                <div class="clearfix"></div>
                            </div>
                            <div class="x_content">
                                <form method="post" action="/role/list" th:action="@{/role/list}">
                                    <input type="hidden" name="pageIndex" value="1"/>
                                    <ul>
                                        <li>
                                            <div class="form-group">
                                                <label class="control-label col-md-3 col-sm-3 col-xs-12">角色名称</label>
                                                <div class="col-md-6 col-sm-6 col-xs-12">
                                                    <input name="roleName" type="text" th:value="${roleName}"
                                                           class="form-control col-md-6 col-xs-12" value="">
                                                </div>
                                            </div>
                                        </li>
                                        <li>
                                            <button type="submit" class="btn btn-primary"> 查 &nbsp;&nbsp;&nbsp;&nbsp;询</button>
                                        </li>
                                    </ul>
                                </form>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-12 col-sm-12 col-xs-12">
                        <div class="x_panel">
                            <div class="x_content">
                                <p class="text-muted font-13 m-b-30"></p>
                                <div id="datatable-responsive_wrapper"
                                     class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <a href="/role/add" th:href="@{/role/add}"
                                               class="btn btn-success btn-sm"
                                            >新增角色信息</a>
                                            <!--shiro:hasPermission="L060101"-->
                                            <table id="datatable-responsive"
                                                   class="table table-striped table-bordered dt-responsive nowrap dataTable no-footer dtr-inline collapsed"
                                                   cellspacing="0" width="100%" role="grid"
                                                   aria-describedby="datatable-responsive_info" style="width: 100%;">
                                                <thead>
                                                <tr role="row">
                                                    <th class="sorting_asc" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        aria-label="First name: activate to sort column descending"
                                                        aria-sort="ascending">角色编号
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        角色名称
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        角色描述
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        角色状态
                                                    </th>
                                                    <th class="sorting" tabindex="0"
                                                        aria-controls="datatable-responsive" rowspan="1" colspan="1"
                                                        aria-label="Last name: activate to sort column ascending">
                                                        操作
                                                    </th>
                                                </tr>
                                                </thead>
                                                <tbody>
                                                <tr role="row" class="odd" th:each="role:${rolePage}">
                                                    <td tabindex="0" class="sorting_1" th:text="${role.roleId}">roleId</td>
                                                    <td th:text="${role.roleName}">roleName</td>
                                                    <td th:text="${role.roleDesc}">roleDesc</td>
                                                    <td th:text="${role.roleFlag==1? '正常':'禁用'}">roleFlag</td>
                                                    <td>
                                                        <div class="btn-group">
                                                            <button type="button" class="btn btn-danger">点击操作</button>
                                                            <button type="button" class="btn btn-danger dropdown-toggle"
                                                                    data-toggle="dropdown" aria-expanded="false">
                                                                <span class="caret"></span>
                                                                <span class="sr-only">Toggle Dropdown</span>
                                                            </button>
                                                            <ul class="dropdown-menu" role="menu">
                                                                <li><a class="editInfo" href="/role/edit?roleId=1" th:href="@{/role/edit(roleId=${role.roleId})}"
                                                                       data-toggle="tooltip" data-placement="top" title=""
                                                                       data-original-title="编辑"
                                                                >编辑</a></li>
                                                                <!--shiro:hasPermission="用户编辑"-->
                                                                <li><a class="delInfo" id="del" href="#" th:onclick="|doDel(this,${role.roleId})|"
                                                                       data-toggle="tooltip" data-placement="top" title=""
                                                                       data-original-title="删除"
                                                                >删除</a></li>
                                                                <!--shiro:hasPermission="用户删除"-->
                                                            </ul>
                                                        </div>
                                                    </td>
                                                </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <!--     <div class="row">
                                             <div class="col-sm-5">
                                                 <div class="dataTables_info" id="datatable-responsive_info"
                                                      role="status" aria-live="polite">共<span th:text="${rolePage.totalElements }">1</span>条记录
                                                     <span th:text="${rolePage.number+1 }">1</span>/<span th:text="${rolePage.totalPages }">1</span>页</div>
                                             </div>
                                             <div class="col-sm-7">
                                                 <div class="dataTables_paginate paging_simple_numbers"
                                                      id="datatable-responsive_paginate">
                                                     <ul class="pagination">
                                                         <li class="paginate_button previous" th:if="${rolePage.number gt 0}"><a
                                                                 href="javascript:page_nav(document.forms[0],1);"
                                                                 aria-controls="datatable-responsive" data-dt-idx="0"
                                                                 tabindex="0">首页</a>
                                                         </li>
                                                         <li class="paginate_button " th:if="${rolePage.number gt 0}"><a
                                                                 href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${rolePage.number }+');'"
                                                                 aria-controls="datatable-responsive" data-dt-idx="1"
                                                                 tabindex="0">上一页</a>
                                                         </li>
                                                         <li class="paginate_button " th:if="${(rolePage.number+1) lt rolePage.totalPages}"><a
                                                                 href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${rolePage.number+2 }+');'"
                                                                 aria-controls="datatable-responsive" data-dt-idx="1"
                                                                 tabindex="0">下一页</a>
                                                         </li>
                                                         <li class="paginate_button next" th:if="${(rolePage.number+1) lt rolePage.totalPages}"><a
                                                                 href="#" th:onclick="'javascript:page_nav(document.forms[0],'+${rolePage.totalPages }+');'"
                                                                 aria-controls="datatable-responsive" data-dt-idx="7"
                                                                 tabindex="0">最后一页</a>
                                                         </li>
                                                     </ul>
                                                 </div>
                                             </div>
                                         </div>-->
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <footer th:include="common/footer :: footer"></footer>
    </div>
</body>

<script layout:fragment="js" th:inline="javascript">
    function doDel(obj,roleId){
        if(confirm("你确定需要删除该角色信息吗？")){
            $.ajax({
                type:"GET",
                url:"/role/del",
                data:"roleId="+roleId,
                dataType:"json",
                success:function(data){
                    if(data.delResult == true){//删除成功：移除删除行
                        alert("删除成功！");
                        $(obj).parents("tr").remove();
                    }
                },
                error:function(data){
                    alert("对不起，删除失败！");
                }
            });
        }
    }

</script>
</html>